<script lang="ts" setup>
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { getLabelListByClassifyTypeApi, type LabelVO } from '@/request/api/label'
import { ClassifyEnum } from '@/enum'
import type { PageDTO, PageVO, ResultType } from '@/type/type'
import { type ArticleVO, getArticlePageApi } from '@/request/api/article'

const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) {
    return
  }
  calendar.value.selectDate(val)
}

const labelIds = ref<LabelVO[]>([])

const getLabel = () => {
  getLabelListByClassifyTypeApi(ClassifyEnum.DIARY).then((res: ResultType<LabelVO[]>) => {
    labelIds.value = res.data
    if (labelIds.value.length > 0) {
      getList(labelIds.value[0].id)
    }
  })
}

const list = ref<ArticleVO[]>([])
const getList = (labelId: number) => {
  page.value.param['labelId'] = labelId
  getArticlePageApi(page.value).then((res: ResultType<PageVO<ArticleVO>>) => {
    list.value = res.data.list
  })
}

const page = ref<PageDTO>({
  size: 10,
  current: 1,
  param: {
    labelId: 30000001
  }
})

onMounted(() => {
  getLabel()
})
</script>

<template>
  <TopImageTemplate>
    <template #title>
      <el-container class="items-center gap-1" direction="vertical">
        <span class="text-3xl ellipsis-1 flowing-text">随笔随记</span>
        <span class="ellipsis-1">莫等闲，白了少年头，空悲切！</span>
      </el-container>
    </template>
    <div class="inner-max-box gap-5 max-md:flex-col">
      <div class="p-5">
        <el-container class="min-h-80 !h-fit use-shadow">
          <el-calendar
            ref="calendar"
            class="use-second-bg use-radius use-shadow use-transitions-shadow-short"
          >
            <template #date-cell="{ data }">
              <p
                :class="
                  data.isSelected ? 'is-selected relative text-center' : 'relative text-center'
                "
              >
                {{ data.day.split('-').slice(2).join('-') }}
                <span class="absolute left-0 top-0">
                  {{ data.isSelected ? '✔️' : '' }}
                </span>
              </p>
            </template>
            <template #header="{ date }">
              <el-container class="gap-5 items-center justify-center">
                <SvgIcon
                  name="downward"
                  parentClass="cursor-pointer"
                  svg-class="rotate-90"
                  @click="selectDate('prev-month')"
                />
                <span class="text-center">{{ date }}</span>
                <SvgIcon
                  name="downward"
                  parentClass="cursor-pointer"
                  svg-class="-rotate-90"
                  @click="selectDate('next-month')"
                />
              </el-container>
            </template>
          </el-calendar>
        </el-container>
      </div>
      <el-empty v-if="list.length === 0" />
      <el-container v-else direction="vertical">
        <TimelineTemplate
          v-for="(p, i) in list"
          :key="p.id"
          :index="i"
          :text="p.content"
          :time="p.createTime.toString()"
        />
      </el-container>
    </div>
  </TopImageTemplate>
</template>

<style lang="scss" scoped>
.note-text {
  &:before {
    content: '隐藏';
    visibility: hidden;
  }
}

.note-box {
  max-width: calc(100% - 52px);
  max-height: calc(100% - 40px);
}
</style>
